<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="../build/css/GridManager.css">
	<script type="text/javascript" src="../build/js/GridManager.js"></script>
    <title>GridManager:使用静态数据渲染</title>
    <style>
        html, body{
            overflow-x:hidden;
        }
        h2{
            font-size:22px;
            padding:10px 30px;
            color:#333;
        }
        p{
            font-size:14px;
            padding:10px 30px;
            color:#333;
            text-indent:2em;
        }
        hr{
            margin-top: 18px;
            margin-bottom: 18px;
            border: 0;
            border-top: 1px solid #eee;
        }
        .plugin-action{
            display: inline-block;
            color: steelblue;
            margin-right: 10px;
            cursor: pointer;
        }
        .plugin-action:hover{
            text-decoration:underline;
        }
    </style>
</head>

<body>
<h2>GridManager:使用静态数据渲染</h2>
<p>注意:</p>
<h2>GridManager:使用静态数据渲染</h2>
<button id="create-gm">渲染GridManager</button>
<hr/>
<div style="width:95%;margin:0px auto;">
</div>
<table grid-manager="cccc"></table>
<script type="text/javascript">
    document.getElementById('create-gm').onclick = function(){

        //单列表简易渲染
        var table = document.querySelector('table[grid-manager]');
        /*
        $.fn.GM.defaults = {
            isDevelopMode: true,
            autoLoadCss:true  //自动加载CSS文件，无需在页面中引用
        };
        */
        table.GM({
            supportRemind: true
            ,autoLoadCss:true  //自动加载CSS文件，无需在页面中引用
            ,i18n:'zh-cn'
            ,textConfig:{
                'page-go': {
                    'zh-cn':'跳转',
                    'en-us':'Go '
                }
            }
            ,supportSetTop: true
            ,gridManagerName:'aaa'
            ,disableCache:true
            ,disableOrder:false
            ,supportSorting: true
            ,supportDrag:true
            ,supportAjaxPage:true
            ,emptyTemplate: '<div class="gm-emptyTemplate">什么也没有</div>'
            ,ajax_data : {
                "data":[{
                    "name": "baukh",
                    "age": "28",
                    "createDate": "2015-03-12",
                    "info": "野生前端程序",
                    "operation": "修改"
                },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },{
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },{
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    },
                    {
                        "name": "baukh",
                        "age": "28",
                        "createDate": "2015-03-12",
                        "info": "野生前端程序",
                        "operation": "修改"
                    }
                ],
                "totals": 1682
            }
            ,isCombSorting: false
            ,pageSize:30
            ,query: {ex: '用户自定义的查询参数,格式:{key:value}'}
            ,columnData: [{
                key: 'name',
                remind: 'the username',
                sorting: 'up',
                width: '200px',
                text: 'username'
            },{
                key: 'age',
                remind: 'the age',
                sorting: '',
                width: '200px',
                text: 'age'
            },{
                key: 'createDate',
                remind: 'the createDate',
                sorting: 'down',
                width: '200px',
                text: 'createDate'
            },{
                key: 'info',
                remind: 'the info',
                sorting: '',
                text: 'info'
            },{
                key: 'operation',
                remind: 'the operation',
                sorting: '',
                width: '100px',
                text: 'operation',
                template: function(operation, rowObject){  //operation:当前key所对应的单条数据；rowObject：单个一行完整数据
                    return '<a href=javascript:alert("这是一个按纽");>'+operation+'</a>';
                }
            }
            ]
            ,pagingBefore:function(query){
                console.log('Event: 分页前', query);
            }
            ,pagingAfter: function(query){
                console.log('Event: 分页后', query);
            }
            ,sortingBefore:function(query){
                console.log('Event: 排序前', query);
            }
            ,sortingAfter: function(query){
                console.log('Event: 排序后', query);
            }
            ,ajax_success: function(data){
                console.log('Event: ajax_success', data);
            }
        });

        // 日期格式化,不是插件的代码,只用于处理时间格式化
        Date.prototype.format = function(fmt){
            var o = {
                "M+": this.getMonth() + 1, //月份
                "D+": this.getDate(), //日
                "d+": this.getDate(), //日
                "H+": this.getHours(), //小时
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/([Y,y]+)/.test(fmt)){
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }
            for (var k in o){
                if(new RegExp("(" + k + ")").test(fmt)){
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                }
            }
            return fmt;
        }
    }
</script>

</body>
</html>
